<template>
  <div class="app-container">
    <el-row>
      <div style="display: flex;">
        <div style="display: flex;align-items: center">
          <label class="margin-right">基准库: </label>
<!--          <chose-datasource @change="changeBaseDatasource" />-->
          <data-source-chose @changeConnName="changeBaseConnName" @changeNamespace="changeBaseNamespace" />
        </div>
        <div style="display: flex;align-items: center" class="margin-left" >
          <label class="margin-right">比对库: </label>
<!--           <chose-datasource @change="changeCompareDatasource" />-->
          <data-source-chose @changeConnName="changeCompareConnName" @changeNamespace="changeCompareNamespace"/>
        </div>
      </div>

    </el-row>

    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane label="变更信息" name="modifyInfo">
        <el-button class="margin-bottom" type="primary" size="small" @click="compareMeta">比较</el-button>
        <el-row>
          <el-col :span="6">
            <el-table
              :data="tableModifies"
              size="mini"
              border
              stripe
              v-loading="tabs.modifyInfo.loading"
              style="width: 100%"
              highlight-current-row
            >
              <el-table-column type="index" width="55" />
              <el-table-column
                prop="diffType"
                label="变更类型"
                width="100"
              />
              <el-table-column
                prop="tableName"
                label="表名称"
              />
            </el-table>
          </el-col>
          <el-col :span="18" style="padding: 10px;" >
            <el-divider content-position="left">新增的数据表</el-divider>
            <div style="max-height: 80vh;overflow-y: scroll">
              <template v-for="tableModify in tableModifies" v-if="tableModify.diffType === 'ADD'" >
                <p>新加数据表: {{tableModify.tableName}} ( {{tableModify.newTable.table.remark}} )</p>

                <el-row>
                  <el-col :span="15">
                    <el-table
                      :data="tableModify.newTable.columns"
                      border
                      stripe
                      v-loading="tabs.modifyInfo.loading"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column
                        type="index"
                        width="50"
                      />
                      <el-table-column
                        prop="columnName"
                        label="列名"
                        width="200"
                      />
                      <el-table-column
                        label="必填"
                        width="50"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.nullable ? '':'必填' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="类型"
                        width="170"
                      >
                        <template slot-scope="scope">
                          <span>{{ showTableColumnType(scope.row) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="remark"
                        label="注释"
                      />
                    </el-table>
                  </el-col>
                  <el-col :span="9" v-if="tableModify.newTable.indexs && tableModify.newTable.indexs.length > 0">
                    <el-table
                      :data="tableModify.newTable.indexs"
                      border
                      stripe
                      v-loading="tabs.modifyInfo.loading"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column
                        type="index"
                        width="50"
                      />
                      <el-table-column
                        prop="indexName"
                        label="索引名称"
                        width="200"
                      />
                      <el-table-column
                        prop="columnName"
                        label="列名"
                        width="100"
                      />
                      <el-table-column
                        label="索引类型"
                      >
                        <template slot-scope="scope">
                          <span>{{ showIndexType(scope.row) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="ordinalPosition"
                        label="顺序"
                      />
                      <el-table-column
                        label="unique"
                      >
                        <template slot-scope="scope">
                          <span>{{ scope.row.unique }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </div>

            <el-divider content-position="left">修改的数据表</el-divider>
            <div  style="max-height: 80vh;overflow-y: scroll">
              <template v-for="tableModify in tableModifies" v-if="tableModify.diffType === 'MODIFY'">
                <p>修改数据表: {{tableModify.tableName}}</p>

                <el-row>
                  <el-col :span="15">
                    <el-table
                      :data="tableModify.modifyColumns"
                      border
                      stripe
                      v-loading="tabs.modifyInfo.loading"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column
                        type="index"
                        width="50"
                      />
                      <el-table-column
                        label="变更类型"
                        prop="diffType"
                        width="100"
                      />
                      <el-table-column
                        label="列名"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseColumn && scope.row.newColumn && scope.row.baseColumn.columnName === scope.row.newColumn.columnName">
                            {{scope.row.baseColumn.columnName}} 匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseColumn ? scope.row.baseColumn.columnName: ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newColumn ? scope.row.newColumn.columnName: '删除'}}</span>
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="必填"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseColumn && scope.row.newColumn && scope.row.baseColumn.nullable === scope.row.newColumn.nullable">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseColumn ? (scope.row.baseColumn.nullable ? '' : '必填') : ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newColumn ? (scope.row.newColumn.nullable ? '' : '必填' ): '删除'}}</span>
                          </span>

                        </template>
                      </el-table-column>
                      <el-table-column
                        label="类型"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseColumn && scope.row.newColumn
                          && scope.row.baseColumn.typeName === scope.row.newColumn.typeName
                          && scope.row.baseColumn.decimalDigits === scope.row.newColumn.decimalDigits
                          && scope.row.baseColumn.columnSize === scope.row.newColumn.columnSize">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseColumn ? showTableColumnType(scope.row.baseColumn): ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newColumn ? showTableColumnType(scope.row.newColumn): '删除'}}</span>
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="注释"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseColumn && scope.row.newColumn && scope.row.baseColumn.remark === scope.row.newColumn.remark">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b>  {{ scope.row.baseColumn ? scope.row.baseColumn.remark: ''}}</span>
                            <span class="margin-little-left"><b>新:</b>  {{ scope.row.newColumn ? scope.row.newColumn.remark: '删除'}}</span>
                          </span>

                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="9" v-if="tableModify.modifyIndices.length > 0">
                    <el-table
                      :data="tableModify.modifyIndices"
                      border
                      stripe
                      v-loading="tabs.modifyInfo.loading"
                      style="width: 100%"
                      size="mini"
                    >
                      <el-table-column
                        type="index"
                        width="50"
                      />
                      <el-table-column
                        label="变更类型"
                        prop="diffType"
                        width="100"
                      />
                      <el-table-column
                        label="索引名称"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseIndex && scope.row.newIndex && scope.row.baseIndex.indexName === scope.row.newIndex.indexName">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseIndex ? scope.row.baseIndex.indexName: ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newIndex ? scope.row.newIndex.indexName: '删除'}}</span>
                          </span>

                        </template>
                      </el-table-column>
                      <el-table-column
                        label="列名"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseIndex && scope.row.newIndex && scope.row.baseIndex.columnName === scope.row.newIndex.columnName">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseIndex ? scope.row.baseIndex.columnName: ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newIndex ? scope.row.newIndex.columnName: '删除'}}</span>
                          </span>

                        </template>
                      </el-table-column>
                      <el-table-column
                        label="索引类型"
                      >
                        <template slot-scope="scope">
                           <span class="text-forestgreen" v-if="scope.row.baseIndex && scope.row.newIndex && scope.row.baseIndex.indexType === scope.row.newIndex.indexType">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseIndex ? showIndexType(scope.row.baseIndex): ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newIndex ? showIndexType(scope.row.newIndex): '删除'}}</span>
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="ordinalPosition"
                        label="顺序"
                      >
                        <template slot-scope="scope">
                          <span class="text-forestgreen" v-if="scope.row.baseIndex && scope.row.newIndex && scope.row.baseIndex.ordinalPosition === scope.row.newIndex.ordinalPosition">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b>  {{ scope.row.baseIndex ? scope.row.baseIndex.ordinalPosition: ''}}</span>
                          <span class="margin-little-left"><b>新:</b>  {{ scope.row.newIndex ? scope.row.newIndex.ordinalPosition: '删除'}}</span>
                          </span>

                        </template>
                      </el-table-column>
                      <el-table-column
                        label="unique">
                        <template slot-scope="scope">
                           <span class="text-forestgreen" v-if="scope.row.baseIndex && scope.row.newIndex && scope.row.baseIndex.unique === scope.row.newIndex.unique">
                            匹配
                          </span>
                          <span v-else>
                            <span><b>旧:</b> {{ scope.row.baseIndex ? scope.row.baseIndex.unique: ''}}</span>
                            <span class="margin-little-left"><b>新:</b> {{ scope.row.newIndex ? scope.row.newIndex.unique: '删除'}}</span>
                          </span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </div>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="变更SQL" name="modifySql" v-loading="tabs.modifySql.loading">
        <el-button class="margin-bottom" type="primary" size="small" @click="compareMetaChangeSqls">比较</el-button>
        <el-button class="margin-bottom" type="danger" size="small" @click="executor">在基准库执行</el-button>

        <p>总sql数量: {{tabs.modifySql.sqls.length}} <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(tabs.modifySql.sqls,$event)">复制所有</el-button></p>
        <ul class="data-list" style="max-height: 80vh;overflow-y: scroll" >
          <li v-for="(sql,index) in tabs.modifySql.sqls">
            <el-card>
              <div slot="header" class="clearfix">
                <span>SQL {{index + 1}}</span>
                <el-button  style="float: right; padding: 3px 0"  type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(sql,$event)">复制</el-button>
              </div>
              <pre>{{sql}}</pre>
            </el-card>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DataSourceChose from '@/views/database/DataSourceChose'

import clip from '@/utils/clipboard'

import database from '@/api/database'

export default {
  name: 'metaCompare',
  components: { DataSourceChose },
  data(){
    return {
      base: {
        connName: null,
        namespace: {
          catalog: null,
          schema: null
        }
      },
      compare: {
        connName: null,
        namespace: {
          catalog : null,
          schema: null
        }
      },
      tableModifies: [],
      tabs: {
        activeTabName: 'modifyInfo',
        modifyInfo: {
          loading: false,
        },
        modifySql: {
          loading: false,
          sqls: [],
        }
      }
    }
  },
  methods: {
    executor(){
      this.$message('暂不支持')
    },
    copyText(data,$event){
      if (typeof(data) === 'string'){
        clip(data, $event)
      }else{
        clip(data.join('\n'), $event)
      }

    },
    changeBaseConnName(connName){
      this.base.connName = connName;
    },
    changeCompareConnName(connName){
      this.compare.connName = connName;
    },
    changeBaseNamespace(namespace){
      this.base.namespace = namespace;
    },
    changeCompareNamespace(namespace){
      this.compare.namespace = namespace;
    },
    showTableColumnType(row) {
      let columnSize = '(' + row.columnSize + ')'
      if (row.decimalDigits) {
        columnSize = '(' + row.columnSize + ',' + row.decimalDigits + ')'
      }
      return row.typeName + columnSize
    },
    showIndexType(row) {
      switch (row.indexType) {
        case 0:
          return 'tableIndexStatistic'
        case 1:
          return 'tableIndexClustered'
        case 2:
          return 'tableIndexHashed'
        case 3:
          return 'BTree'
      }
      return 'unknow'
    },
    compareMeta(){
      this.tabs.modifyInfo.loading = true;
      database.compareMeta({baseConnName: this.base.connName,compareConnName: this.compare.connName,baseNamespace: this.base.namespace,compareNamespace: this.compare.namespace}).then(res => {
        this.tabs.modifyInfo.loading = false;
        this.tableModifies = res.data;

      }).catch(res => {
        this.tabs.modifyInfo.loading = false;
      })
    },
    compareMetaChangeSqls(){
      this.tabs.modifySql.loading = true;
      this.tabs.modifySql.sqls.length = 0;
      database.compareMetaChangeSqls({baseConnName: this.base.connName,compareConnName: this.compare.connName,baseNamespace: this.base.namespace,compareNamespace: this.compare.namespace}).then(res => {
        this.tabs.modifySql.loading = false;

        this.tabs.modifySql.sqls = res.data;
      }).catch(res => {
        this.tabs.modifySql.loading = false;
      })
    },
    switchTab(){

    }
  },
  computed: {

  }
}
</script>


